<template>
  <div id="calendar-cont">
    <div class="calend-container">
      <!-- <h2 class="t-center">活动日历</h2> -->
      <div class="flexLayout">
        <transition name="show">
        <div v-show="showCalen">
        <vue-event-calendar :events="demoEvents" :selet="selet" @day-changed="handleDayChanged" @month-changed="handleMonthChanged"
        >
          <template scope="props">
            <div v-for="(event, index) in props.showEvents" class="event-item" :key="index">
              <!-- In here do whatever you want, make you owner event template -->
              {{event}}
            </div>
          </template>
        </vue-event-calendar>
        <div style='clear:both'></div>
        <div class="directType">
          <div class="fl">
            <span @click="dtclick(1)">
              多品类直采
            </span>
            <span @click="dtclick('')">
              单品类直采
            </span>
          </div>
          <div class="fr">
            <span class="" @click="toast"></span>
          </div>
        </div>
        </div>
        </transition>
        <div class="curDate" id='searchBar' :class="{'curDateFixed':searchBarFixed}" v-if="showCalen" ref="aa">{{day}}日</div>
        <div class="curDate" v-if="!showCalen" style="position:fixed;width: 100%">{{month}}月{{day}}日</div>
        <div class="type" :style="{marginTop:!showCalen?'72.5px':''}">
          <div  class="list" v-for="(item,index) in hdList" :key="index">
            <div class="shadow">
            <div :class="{'moreActive':item.dtFlag==true,'singleAcitve':item.xtFlag==true}">
              <span class="icon">
                <img v-if="item.catValue=='jiancai'" src="../../assets/images/canlendar/jiancai@2x.png" alt="" ref="imgsrc">
                <img v-else-if="item.catValue=='jiaju'" src="../../assets/images/canlendar/jiaju@2x.png" alt="" ref="imgsrc">
                <img v-else-if="item.catValue=='jiadian'" src="../../assets/images/canlendar/jiadian@2x.png" alt="" ref="imgsrc">
                <img v-else-if="item.catValue=='qita'" src="../../assets/images/canlendar/qita@2x.png" alt="" ref="imgsrc">
                <img v-else-if="item.catValue=='zonghe'" src="../../assets/images/canlendar/zonghe@2x.png" alt="" ref="imgsrc">
                <img v-else src="../../assets/images/canlendar/qita@2x.png">
              </span>
            </div>
            <a :href="item.url" class="nowReport">
              <div class="content" :style="{'box-shadow':item.dtFlag?moreShadow:singShadow}">
                <p v-text="item.gpName">
                  <!-- {{item.gpName}} -->
                </p>
                <p v-text="item.desc">
                </p>
                <p>
                  立即报名 >>>
                </p>
              </div>
            </a>
            </div>
          </div>
        </div>
      </div>
      <div class="listNone" v-if="hdList.length>0?false:true"><span>亲，当日无采购团，看看其他日期吧！</span></div>
    </div>
  </div>
</template>

<script>
let today = new Date();
import { formatDate, unique } from "../../config";
import { fetch } from "../../api/index";
import { Toast } from "mint-ui";
export default {
  name: "app",
  data() {
    return {
      searchBarFixed: false,
      month: 0,
      day: 0,
      year: 2018,
      iconbg: "",
      iconsm: "",
      imgurl: "",
      hdList: [],
      demoEvents: [],
      selet: [],
      showCalen: true,
      topDis: 0,
      moreShadow: '0px 1px 10px 0px rgba(206, 141, 23, 0.16)',
      singShadow: '0px 1px 10px 0px rgba(200, 37, 41, 0.16)'
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll)
  },
  created() {
    let today = new Date();
    let year = today.getFullYear();
    this.year = year;
    let month = today.getMonth() + 1;
    month = month < 10 ? "0" + month : month;
    this.month = month;
    let day = today.getDate();
    day = day < 10 ? "0" + day : day;
    this.day = day;
    let startTime = formatDate(today, 2);
    let endTime = startTime;
    let dayData = {
      startTime: startTime,
      endTime: endTime
    };
    let monthre = this.year + "-" + this.month + "-" + "01";
    let monthreq = this.year + "-" + this.month + "-" + "31";
    let data = {
      startTime: monthre,
      endTime: monthreq
    };
    this.listShow(data, 2);
    this.listShow(dayData, 1);
    //  console.log(this.hdList)
    // this.$nextTick(() => {
    //   const topDis = this.$refs.aa.offsetTop;
    //   this.topDis = topDis;
    //   console.log(this.topDis);
    // });
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var offsetTop = document.querySelector("#searchBar").offsetTop;
      if (scrollTop > offsetTop) {
        this.searchBarFixed = true;
      } else {
        this.searchBarFixed = false;
      }
    },
    handleDayChanged(data) {
      // console.log(data.date)
      this.selet.push(data.date);
      let sendDay = data.date.split("/");
      sendDay[1] = sendDay[1] < 10 ? "0" + sendDay[1] : sendDay[1];
      sendDay[2] = sendDay[2] < 10 ? "0" + sendDay[2] : sendDay[2];
      this.month = sendDay[1];
      this.day = sendDay[2];
      sendDay = sendDay[0] + "-" + sendDay[1] + "-" + sendDay[2];
      let startTime = sendDay;
      let endTime = sendDay;
      let cliData = {
        startTime: startTime,
        endTime: endTime
      };
      this.listShow(cliData, 1);
      this.hdList.forEach(item => {
        // console.log(item.dtFlag)
        item.url =
          "http://m.wh.dajianhui.com/gp/" + item.id + "/detail.shtml";
        /* if (item.dtFlag) {
              this.iconbg = item.dtFlag;
              this.iconsm = false
            } else if (item.xtFlag) {
              this.iconsm = item.xtFlag
              this.iconbg = false
            } else {
              this.iconbg = false
              this.iconsm = false
            }
            switch(item.catValue) {
              case 'jiancai':
              this.imgurl = '../src/assets/images/jiancai@2x.png'
              console.log(this)
              break
              case 'jiaju':
              this.imgurl = '../src/assets/images/jiaju@2x.png'
              break
            } */
      });
      // 获取点击的日期发送请求
      // this.hdList = []

      /* console.log(this.hdList)
          this.demoEvents.forEach((item) => {
            if(item.startDate == sendDay) {
              this.hdList.push(item)
            }
          })
          this.hdList = this.hdList.events */
    },
    handleMonthChanged(data) {
      // let startTime = formatDate(data.date,2)
      // console.log(startTime)
      let getYear = parseInt(data.split("年")[0]);
      let getMonth = parseInt(data.split("年")[1].split("月")[0]);
      getMonth = getMonth < 10 ? "0" + getMonth : getMonth;
      let sendMonth = {
        startTime: getYear + "-" + getMonth + "-" + "01",
        endTime: getYear + "-" + getMonth + "-" + "31"
      };
      /* 这是要传的月 */
      // console.log(sendMonth)
      this.listShow(sendMonth, 2);
    },
    //点击多品和单品的筛选
    /* dtclick(type){
          console.log(this.demoEvents)
          if(type==1){
          let dtFlagdata = this.demoEvents.filter((item,index) => {
            // console.log(item,index)
             return item.dtFlag == true
    
          }
          )
          // console.log(this.hdList)
          this.hdList = dtFlagdata
          }else{
            let dtFlagdata = this.demoEvents.filter(function(item,index) {
            // console.log(item,index)
            return item.xtFlag == true //返回满足条件的数
          })
          
          this.hdList = dtFlagdata
          console.log(this.hdList)
          
          }
        }, */
    async listShow(date, type) {
      let data = {
        areaId: 9,
        startTime: date.startTime,
        endTime: date.endTime
      };
      // console.log(data)
      let res = await fetch("/api/calendar/gpList", data);
      console.log(res)
      let arr = res.obj.gpList;
      let newArr = [];
      let newArr1 = [];
      if (type == 2) {
        arr.forEach(item => {
          // console.log(item.startDate)
          let date = item.startDate.split(" ")[0];
          let b = date.replace(/-/g, "/"); //全局替换
          item.startDate = b;
          item.date = item.startDate; //属性可以直接用名添加加
          newArr.push(item);
          //  console.log(item.xtFlag)
        });
        // console.log(newArr);
        let map = new Object();
        for (let i = 0; i < newArr.length; i++) {
          let item = newArr[i];
          let time = item.startDate;
          if (!map[time]) {
            let array = new Array();
            array.push(item);
            map[time] = {
              startDate: time,
              file: array,
              dtFlag: item.dtFlag,
              xtFlag: item.xtFlag,
              date: item.date,
              catValue: item.catValue,
              desc: item.desc,
              endDate: item.endDate,
              gpName: item.gpName,
              id: item.id
            };
          } else {
            let temp = map[time];
            temp.file.push(item);
            map[time] = temp;
          }
        }
        let resultArray = new Array();
        for (let key in map) {
          resultArray.push(map[key]);
        }

        for (let i = 0; i < resultArray.length; i++) {
          if (resultArray[i].file.length > 0) {
            for (let j = 0; j < resultArray[i].file.length; j++) {
              if (resultArray[i].file[j].xtFlag == true) {
                resultArray[i].xtFlag = true;
              }
              if (resultArray[i].file[j].dtFlag == true) {
                resultArray[i].dtFlag = true;
              }
            }
          }
        }
        this.demoEvents = resultArray;
        // console.log(this.demoEvents)
        // this.hdList = newArr
      } else {
        this.hdList = arr;
        // console.log(this.hdList)
        this.hdList.forEach(item => {
          // console.log(item);
          item.url =
            "http://m.wh.dajianhui.com/gp/" + item.id + "/detail.shtml";
          if (item.dtFlag) {
            this.iconbg = item.dtFlag;
          } else if (item.xtFlag) {
            this.iconsm = item.xtFlag;
          } else {
            this.iconbg = false;
            this.iconsm = false;
          }
        });
      }
    },
    toast() {
      Toast({
        message: "最终信息以更新为准",
        position: "middle",
        duration: 1000
      });
    },
  }
};
</script>

<style>
.curDateFixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}
html,
body {
  width: 100%;
  /* height: 100%; */
}

#app {
  width: 100%;
}

#calendar-cont {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  /* margin-top: 30px; */
  width: 100%;
  /* height: 100%; */
}

h1,
h2,
h3 {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.t-center {
  text-align: center;
  margin: 20px;
  margin-bottom: 0;
  margin-top: 0;
}

/* my */

p {
  margin: 0;
}

body {
  margin: 0;
}

.calend-container {
  background-color: #fafafa;
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

/*   .flexLayout {
    flex: 1;
  } */

#calendar-cont .__vev_calendar-wrapper .cal-wrapper .cal-header {
  padding-bottom: 0;
}

#calendar-cont .__vev_calendar-wrapper .cal-wrapper .cal-header {
  overflow: inherit;
}

#calendar-cont .__vev_calendar-wrapper .cal-wrapper .cal-body .weeks {
  background-color: #eee;
  /* border-top: 1px solid #e2e2e2; */
  /* border-bottom: 1px solid #e2e2e2; */
  color: #888;
  font-size: 14px;
}

#calendar-cont .__vev_calendar-wrapper .cal-wrapper {
  padding: 0;
}

.__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item {
  border-bottom: 1px solid #f4f4f4;
}

@media screen and (max-width: 768px) {
#app .__vev_calendar-wrapper .cal-wrapper .date-num {
  height: 50px;
  line-height: 50px;
}
}
.__vev_calendar-wrapper .cal-wrapper .cal-body .dates {
  background-color: #fff;
}

#calendar-cont .__vev_calendar-wrapper .arrow-left.icon {
  width: 24px;
  height: 24px;
  margin-top: 0;
  left: 9px;
  border-radius: 50%;
  background-image: url("../../assets/images/canlendar/l@2x.png");
  background-size: cover;
}

#calendar-cont .__vev_calendar-wrapper .arrow-right.icon {
  width: 24px;
  height: 24px;
  right: 9px;
  border-radius: 50%;
  margin-top: 0;
  background-image: url("../../assets/images/canlendar/r@2x.png");
  background-size: cover;
}

#calendar-cont .__vev_calendar-wrapper .cal-wrapper .cal-header .title {
  font-size: 17px;
  padding-top: 17px;
  color: #333;
  /* width: 80%; */
}

#calendar-cont .__vev_calendar-wrapper .arrow-left.icon::before,
#calendar-cont .__vev_calendar-wrapper .arrow-right.icon::before {
  border: 0;
}

#calendar-cont .directType {
  height: 45px;
  line-height: 45px;
  padding: 0 16px;
  /* position: relative; */
  background-color: #f8f8f8 !important;
}

@media screen and(min-width: 768px) {
  #calendar-cont .directType,
  .curDate,
  .type {
    width: 50%;
    position: relative;
  }
  .curDate {
    width: 50%;
    position: relative;
  }
}

.directType {
  display: flex;
}

.directType .fl,
.directType .fr {
  font-size: 13px;
  color: #888;
}

.directType .fl {
  /* float: left; */
  flex: 0 0 80%;
  text-align: left;
}

.directType .fl > span {
  padding-left: 13px;
  position: relative;
  display: inline-block;
}
.directType .fl > span:first-child {
  margin-right: 25px;
}
.directType .fl > span::before {
  content: "";
  width: 9px;
  height: 9px;
  /* display: inline-block; */
  background-color: #e8393d;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-4.5px);
}

.directType .fl > span:last-child::before {
  background-color: #fbb437;
}

.directType .fr {
  /* float: right; */
  height: 45px;
  line-height: 45px;
  /* position: relative; */
  flex: 1;
  text-align: right;
}

.directType .fr > span {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("../../assets/images/canlendar/yiwen@2x.png");
  background-size: cover;
  margin-top: 13.5px;
  /* position: absolute;
  top: 50%;
  transform: translateY(-18px) */
}

.curDate {
  text-align: center;
  height: 45.5px;
  line-height: 45.5px;
  background-color: #eee;
  border: solid 1px #e2e2e2;
}

.type {
  padding: 0 15px;
  padding-bottom: 15px;
}

.list {
  /* display: flex; */
  margin-top: 25px;
}
.shadow {
  display: flex;
  /* box-shadow: 0px 1px 10px 0px 
		rgba(204, 204, 204, 0.5); */
}
/* 逻辑要添加的背景色即多品和单品icon */

.moreActive {
  flex: 0 0 40px;
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  padding: 10px 6px;
  background-color: #e8393d;
  border-radius: 5px 0 0 5px;
  box-shadow: 0px 1px 10px 0px 
		rgba(206, 141, 23, 0.16);
}

.singleAcitve {
  flex: 0 0 40px;
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  padding: 10px 6px;
  background-color: #fbb437;
  border-radius: 5px 0 0 5px;
  box-shadow: 0px 1px 10px 0px 
		rgba(200, 37, 41, 0.16);
}

.type .icon {
  display: block;
  width: 28px;
  height: 20px;
}
.type .icon > img {
  width: 100%;
  height: 100%;
}
.type .content {
  flex: 1;
  padding: 0 16.5px;
  padding-top: 15px;
  background-color: #fff;
  text-align: left;
  line-height: 16px;
}

.content p:nth-child(1) {
  font-size: 14px;
  color: #333;
}

.content p:nth-child(2) {
  font-size: 12px;
  color: #888;
  margin-top: 11.5px;
}

.content p:nth-child(3) {
  font-size: 12px;
  color: #da1a1e;
  /* margin: 11.5px 0; */
  margin-top: 11.5px;
  padding-bottom: 11.5px;
  text-align: right;
}

.nowReport {
  display: block;
  width: 100%;
}

/* 背景色修改 */

#calendar-cont
  .__vev_calendar-wrapper
  .cal-wrapper
  .cal-body
  .dates
  .item
  .is-today {
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background-color: #e8393d;
  opacity: 1;
}

#calendar-cont
  .__vev_calendar-wrapper
  .cal-wrapper
  .cal-body
  .dates
  .item
  .is-todaySingle {
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  /* opacity: 0.8; */
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  /* margin-left: 2px; */
  margin-top: 8px;
  background-color: #fbb437;
}

#calendar-cont
  .__vev_calendar-wrapper
  .cal-wrapper
  .cal-body
  .dates
  .item.event.selected-day
  .is-today,
#calendar-cont
  .__vev_calendar-wrapper
  .cal-wrapper
  .cal-body
  .dates
  .item.event.selected-day
  .is-todaySingle {
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  margin-left: -2.5px !important;
  margin-top: 8px;
}

.listNone {
  font-size: 14px;
  color: #888;
  flex: 1;
  /* position: relative; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.listNone span {
  display: inline-block;
  width: 100%;
}
/* ？号弹框 */
.mint-toast.is-placemiddle {
  transform: translate(5%,244%) !important;
}
/* 箭头隐藏 */
</style>